
<html>
	<head>
		<title>Leaflet.Boatmarker Demo</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">
		<style>
			html, body {
				padding:0px;
				margin:0px;
				height:100%;
				width:100%;
			}

			#map {
				width:100%;
				height:100%;
			}
		</style>
	</head>

	<body>
		<div id="map"></div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
		<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
		<script src="./utils/leaflet.boatmarker.js"></script>

		<script>
			// create a map in the "map" div, set the view to a given place and zoom
			var map = L.map("map").setView([54.199343, 12.020497], 13);

			// add an OpenStreetMap tile layer
			L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
			    attribution: "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"
			}).addTo(map);

			// add the boatmarker at a startpoint
			var boatMarker = L.boatMarker(map.getCenter(), {
			    color: "#f1c40f"
			}).addTo(map).on('click', e=> {
        console.log(e)
      })

			boatMarker.setHeading(90);

			function getRandomArbitrary(min, max) {
			    return Math.random() * (max - min) + min;
			}

			var heading = 60;


		</script>
	</body>
</html>